<template>
  <div class="chart_left1">
    <div class="chart_left1-title">各层级编制数</div>
    <div id="chart_left1" />
  </div>
</template>

<script>
const echarts = require('echarts')
import Sever from '@/api/selfApi'
export default {
  name: 'LeftChart1',
  props: {
    dep_code: {
      type: String,
      default: '450000',
      require: true
    }
  },
  data() {
    return {
      chartData: [
        {
          name: '自治区',
          value: 0
        },
        {
          name: '地级市',
          value: 0
        },
        {
          name: '县市区',
          value: 0
        }
      ],
      depcode: '450000-00-0000'
    }
  },

  watch: {
    dep_code(newValue, oldValue) {
      if (newValue) {
        (this.depcode = newValue), this.getGcjbzs()
      }
    }
  },
  destroyed() {
    window.onresize = null
  },
  mounted() {
    // this.getGcjbzs()
  },
  methods: {
    async getGcjbzs() {
      try {
        // 请求后台接口
        const res = await Sever.analyse.getGcjbzs({
          // 请求参数
          dep_code: this.depcode
        })
        if (res.length == 0) {
          Object.assign(this.$data, this.$options.data())
        } else {
          this.chartData[0].value = parseInt(res[0].ZZQ)
          this.chartData[1].value = parseInt(res[0].SHI)
          this.chartData[2].value = parseInt(res[0].XIAN)
        }
        // 传值给图表

        this.drawPie()
      } catch (error) {
        console.log(error)
        Object.assign(this.$data, this.$options.data())
        this.drawPie()
      }
    },

    drawPie() {
      const myChartPiechart_left1 = echarts.init(
        document.getElementById('chart_left1')
      )
      myChartPiechart_left1.clear()

      const color = ['#FF8700', '#ffc300', '#00e473', '#009DFF']
      const chartData = this.chartData
      const arrName = []
      const arrValue = []
      let sum = 0
      const pieSeries = []
      const lineYAxis = []

      // 数据处理
      chartData.forEach((v, i) => {
        arrName.push(v.name)
        arrValue.push(v.value)
        sum = sum + v.value
      })
      // 图表option整理
      chartData.forEach((v, i) => {
        pieSeries.push({
          name: '学历',
          type: 'pie',
          clockWise: false,
          hoverAnimation: false,
          radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
          center: ['30%', '50%'],
          label: {
            show: false
          },
          data: [
            {
              value: v.value,
              name: v.name
            },
            {
              value: sum - v.value,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              }
            }
          ]
        })
        pieSeries.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false, // 顺时加载
          hoverAnimation: true, // 鼠标移入变大
          radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
          center: ['30%', '50%'],
          label: {
            show: false
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: 'rgba(128, 128, 128, 0.2)'
              }
            },
            {
              value: 2.5,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              }
            }
          ]
        })
        v.percent = ((v.value / sum) * 100).toFixed(1) + '%'
        lineYAxis.push({
          value: i,
          textStyle: {
            rich: {
              circle: {
                color: color[i],
                padding: [0, 5]
              }
            }
          }
        })
      })

      const option = {
        color: color,
        // toolbox: {
        //   feature: {
        //     myToolsNum: {
        //       show: true,
        //       textAlign: 'right',
        //       text: '数量',
        //       onclick: function (o) {
        //         alert('1')
        //       }
        //     },
        //     myToolsPrice: {
        //       show: true,
        //       textAlign: 'right',
        //       text: '价格',
        //       onclick: function (o) {
        //         alert('1')
        //       }
        //     }
        //   }
        // },
        grid: {
          top: '15%',
          bottom: '54%',
          left: '30%',
          containLabel: false
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: function(params) {
                const item = chartData[params]
                return (
                  '{line|}{circle|●}{name|' +
                  item.name +
                  '}{bd||}{percent|' +
                  item.percent +
                  '}{value|' +
                  item.value +
                  '}{unit|}'
                )
              },
              interval: 0,
              inside: true,
              textStyle: {
                color: '#333',
                fontSize: 14,
                rich: {
                  line: {
                    width: 100,
                    height: 2,
                    backgroundColor: 'rgba(128, 128, 128, 0.8)'
                  },
                  name: {
                    color: '#fff',
                    fontSize: 14
                  },
                  bd: {
                    color: '#fff',
                    padding: [0, 5],
                    fontSize: 14
                  },
                  percent: {
                    color: '#fff',
                    fontSize: 14
                  },
                  value: {
                    color: '#fff',
                    fontSize: 16,
                    fontWeight: 500,
                    padding: [0, 0, 0, 20]
                  },
                  unit: {
                    fontSize: 14
                  }
                }
              },
              show: true
            },
            data: lineYAxis
          }
        ],
        xAxis: [
          {
            show: false
          }
        ],
        series: pieSeries
      }

      myChartPiechart_left1.setOption(option)
      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener(
        'resize',
        () => myChartPiechart_left1.resize(),
        false
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.chart_left1 {
  width: 100%;
  height: 32%;
  box-sizing: border-box;
  margin-bottom: 20px;
  // background-color: rgba(255, 255, 255, 0.03);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  display: flex;
  flex-direction: column;

  .chart_left1-title {
    font-weight: bold;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
  }

  #chart_left1 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
